<script setup>
import { reactive, ref, watch } from "vue";
import summaryApi from "@/api/summaryApi.js";

import { use } from "echarts/core";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import VChart, { THEME_KEY } from "vue-echarts";

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  GridComponent
]);

const props = defineProps({
  searchParam: {
    type: Object,
    default() {
      return {
        planId: "",
        schoolId: ""
      }
    }
  },
  data: {
    type: Array,
    default: []
  }
});


const dataList = ref([]);
const params = reactive({ showType: 1, sex: "" })

const loading = ref(false);
const headerStyle = {
  borderBottom: "none",
  fontSize: "18px",
};

const columns = reactive([
  { dataIndex: "dataKey", title: "年级", width: 70 },
  { dataIndex: "totalCount", title: "总人数", width: 80 },
  { dataIndex: "testCount", title: "实测人数", width: 90 },
  { dataIndex: "freeTestCount", title: "免考人数", width: 90 },
  { slotName: "bestRate", title: "优秀率", width: 120 },
  { slotName: "wellRate", title: "良好率", width: 120 },
  { slotName: "passRate", title: "及格率", width: 120 },
  { slotName: "noPassRate", title: "不及格率", width: 120 },
  { slotName: "qualifiedRate", title: "合格率", width: 120 },
]);

const gradeBarOption = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  yAxis: {
    type: "value",
    name: "百分比（%）",
    min: 0,
    max: 100,
    boundaryGap: [0, 0.01],
    axisLabel: {
      show: true,
      interval: 0, // 使x轴文字显示全
      color: "#666666",
      formatter: "{value}%", //y轴数值，带百分号
    },
  },
  xAxis: {
    type: "category",
    data: [],
  },
  series: [],
});

const chartRef = ref(null)

// 暴露给父组件的方法
defineExpose({
  getChart: () => chartRef.value,
  setShowType: (type) => {
    params.showType = type
  },
  getParams: () => params
})

const querySummaryData = () => {
  loading.value = true;
  let queryParam = Object.assign({}, params);
  let searchParams = Object.assign({}, props.searchParam, queryParam);
  summaryApi.queryData(searchParams).then((res) => {
    dataList.value = res.grade;
    loading.value = false;
    buildGradeBarOption(dataList.value);
  });
};

const buildGradeBarOption = (gradeData) => {
  let xAxisData = [];
  let series = [];
  let categories = ["优秀率", "良好率", "及格率", "不及格率"];
  categories.forEach((category) => {
    series.push({
      name: category,
      type: "bar",
      data: [],
    });
  });
  gradeData.forEach((item) => {
    xAxisData.push(item.dataKey);
    series.forEach((serie) => {
      if (serie.name == "优秀率") {
        serie.data.push(item.bestRate);
      } else if (serie.name == "良好率") {
        serie.data.push(item.wellRate);
      } else if (serie.name == "及格率") {
        serie.data.push(item.passRate);
      } else if (serie.name == "不及格率") {
        serie.data.push(item.noPassRate);
      }
    });
  });
  gradeBarOption.xAxis.data = xAxisData;
  gradeBarOption.series = series;
};

watch(
  () => props.data,
  (newVal, oldVal) => {
    loading.value = true;
    dataList.value = !newVal ? [] : newVal;
    buildGradeBarOption(dataList.value);
    loading.value = false;
  }, { deep: true, immediate: true }
)

</script>
<template>
  <a-card title="按年级统计" style="margin-top: 16px" :header-style="headerStyle">
    <template #extra>
      <a-space>
        <a-radio-group v-model="params.showType" type="button">
          <a-radio :value="1"><icon-list /></a-radio>
          <a-radio :value="2"><icon-bar-chart /></a-radio>
        </a-radio-group>
        <a-radio-group type="button" v-model="params.sex" @change="querySummaryData">
          <a-radio value="">全部</a-radio>
          <a-radio value="1">男</a-radio>
          <a-radio value="2">女</a-radio>
        </a-radio-group>
      </a-space>
    </template>
    <div v-if="params.showType == 2" style="border: 1px solid #e5e6e5; padding: 16px">
      <v-chart ref="chartRef" :option="gradeBarOption" autoresize class="basechart" />
    </div>
    <a-table v-else :data="dataList" :columns="columns" :loading="loading" :pagination="false">
      <template #bestRate="{ record }">
        <a-progress status="success" size="mini" :percent="record.bestRate / 100" />
        {{ record.bestRate + "%" }}
      </template>
      <template #wellRate="{ record }">
        <a-progress status="primary" size="mini" :percent="record.wellRate / 100" />
        {{ record.wellRate + "%" }}
      </template>
      <template #passRate="{ record }">
        <a-progress status="warning" size="mini" :percent="record.passRate / 100" />
        {{ record.passRate + "%" }}
      </template>
      <template #noPassRate="{ record }">
        <a-progress status="warning" size="mini" :percent="record.noPassRate / 100" />
        {{ record.noPassRate + "%" }}
      </template>
      <template #qualifiedRate="{ record }">
        <a-progress status="primary" size="mini" :percent="record.qualifiedRate / 100" />
        {{ record.qualifiedRate + "%" }}
      </template>
    </a-table>
  </a-card>
</template>